<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        :title="proname"
        left-arrow
         @click-left="$router.back()"
      >
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            theme="dark"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="more" size="30" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </header>
    <div class="content">
      <!-- 轮播图 -->
      <div class="detail-swipe">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item v-for="(item, index) of banners" :key="index" @click="priviewImg(index)">
            <van-image :src="item" fit="cover"/>
          </van-swipe-item>
        </van-swipe>
        <div class="vdo" @click="show = true">1'20</div>
        <van-popup v-model="show">
          <video id="vdo" autoplay width="375" controls src="https://jvod.300hu.com/vod/product/2c734922-a63d-4c92-b965-0d70d4d65f6b/75f44d6c9d4d4673ab586585d26ca771.mp4"></video>
        </van-popup>
      </div>
      <!-- 价格 -->
      <div class="price">{{ originprice }}</div>
      <!-- 名称 -->
      <div>
        <h3>
          <van-tag type="danger">{{ brand }}</van-tag>
          <van-tag type="primary">{{ category }}</van-tag>
          {{ proname }}
        </h3>
      </div>
      <!-- 底部 -->
      <van-goods-action v-if="issale === 0">
        <van-goods-action-icon icon="chat-o" text="客服"/>
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          disabled
          text="商品已下架"
        />
      </van-goods-action>
      <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o" @click="chat" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
// @ 代表 src 的目录
import { getProDetail } from '@/api/detail'
import Vue from 'vue'
import { Toast, ShareSheet, Popover, NavBar, GoodsAction, GoodsActionIcon, GoodsActionButton, Swipe, SwipeItem, Tag, Image as VanImage, ImagePreview, Popup } from 'vant'

Vue.use(Toast)
Vue.use(ShareSheet)
Vue.use(Popover)
Vue.use(NavBar)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(Popup)
Vue.use(Tag)
export default {
  watch: {
    show (newVal) {
      const vdo = document.getElementById('vdo')
      if (!newVal) {
        vdo.pause()
      }
    }
  },
  methods: {
    chat () {
      window._MEIQIA('showPanel')
      window._MEIQIA('metadata', {
        name: '吴大勋', // 美洽默认字段
        address: '深圳千锋', // 美洽默认字段
        class: '2108', // 自定义字段
        lesson: '三阶段', // 自定义字段
        tel: 18813007814
      })
      window.parent.postMessage({
        type: 'sendProductCard',
        content: {
          picUrl: 'https://xxx/xxx.jpg',
          title: '美洽 - 客服系统',
          description: '支持PC端/移动端/微信/APP/微博...等全渠道对话接入，稳定快速，无需下载部署，注册即用',
          productUrl: 'https://xxx/xxx.html',
          salesCount: 111
        }
      }, '*')
    },
    priviewImg (index) {
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    onSelect (action) {
      console.log(action)
      switch (action.index) {
        case 1:
          this.$router.push('/home')
          break
        case 2:
          this.$router.push('/kind')
          break
        case 3:
          this.$router.push('/user')
          break
        case 4:
          Toast('暂未开放')
          break
        case 5:
          // 显示分享面板
          this.showShare = true
          break
      }
    }
  },
  methods: {
    addCartFn () {
      //1 前端判断用户的登录状态
      if (localStorage.getItem('isLogin') === 'true') {
        //2 后端校验登录 ---拦截器
        addCart ({
          userid: localStorage.getItem('userid'),
          num: 1,
          proid: this.proid
        }).then(res => {
          Toast('加入购物车成功')
        })
      }else{
        this.$router.push('/login')
      }
    }
  },
  data () {
    return {
      proid: '',
      banners: [], // 轮播图
      brand: '', // 品牌
      category: '', // 分类
      desc: '', // 详情
      discount: 0, // 折扣
      isrecommend: 1, // 是否被推荐
      issale: 0, // 是不是上架状态
      isseckill: 0, // 是否被秒杀
      originprice: 0, // 商品原价
      proname: '', // 产品名称
      sales: 0, // 销量
      stock: 0, // 库存
      show: false, // 视频显示
      showPopover: false, // 右上角更多
      actions: [
        { index: 1, text: '首页', icon: 'wap-home-o' },
        { index: 2, text: '分类搜索', icon: 'search' },
        { index: 3, text: '我的嗨购', icon: 'user-circle-o' },
        { index: 4, text: '浏览记录', icon: 'records' },
        { index: 5, text: '分享', icon: 'share-o' }
      ],
      showShare: false, // 分享
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  async mounted () {
    this.proid = this.$route.params.proid
    const res = await getProDetail(this.proid)
    // console.log(res.data.data)
    // { banners: ['img,img,img']}
    this.banners = res.data.data.banners[0].split(',')
    this.brand = res.data.data.brand
    this.category = res.data.data.category
    this.desc = res.data.data.desc
    this.discount = res.data.data.discount
    this.isrecommend = res.data.data.isrecommend
    this.issale = res.data.data.issale
    this.isseckill = res.data.data.isseckill
    this.originprice = res.data.data.originprice
    this.proname = res.data.data.proname
    this.sales = res.data.data.sales
    this.stock = res.data.data.stock
  }
}
</script>

<style lang="stylus" scoped>
.my-swipe
  height 3rem
  img
    width 100%
    height 3rem
.detail-swipe
  position relative
  height 3rem
  overflow hidden
  .vdo
    position absolute
    bottom 20px
    left 50%
    transform translateX(-50%)
    width 80px
    height 30px
    background  url('') no-repeat
    background-size contain
    display flex
    justify-content center
    align-items center
</style>
